<template>
  <span>
    <common-edit-dialog
        :title="dialogTitle"
        :visible.sync="dialogShow"
        @cancel="close('onlyClose')"
        @submit="submitForm"
        :button-loading="isPersistenceLoading"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" @submit.native.prevent>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item label="巡检名称" prop="name">
              <common-input v-model="form.name" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="巡检周期" prop="inspectionTime">
              <common-input
                :verify="false"
                v-model="form.inspectionTime"
                placeholder="请输入"
              />
            </el-form-item> -->
            <el-form-item label="巡检周期" prop="inspectionTime">
              <el-popover v-model="cronPopover" trigger="manual" popper-class="vue-cron">
                <Cron
                    ref="vueCron"
                    :value="form.inspectionTime"
                    @change="onChangeCron"
                    @close="cronPopover = false"
                ></Cron>
                <el-input
                    readonly
                    slot="reference"
                    @focus="showCronPopover"
                    v-model="form.inspectionTime"
                    placeholder="请输入巡检周期"
                ></el-input>
              </el-popover>
            </el-form-item>
          </el-col>

          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="告警等级" prop="alarmLevel">-->
          <!--              <el-select-->
          <!--                v-model="form.alarmLevel"-->
          <!--                placeholder="请选择"-->
          <!--                clearable-->
          <!--              >-->
          <!--                <el-option-->
          <!--                  v-for="(item, index) in alarmLevelArr"-->
          <!--                  :key="index"-->
          <!--                  :label="item.dictLabel"-->
          <!--                  :value="parseInt(item.dictValue)"-->
          <!--                ></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="消息优先级" prop="msgPriority">-->
          <!--              <el-select-->
          <!--                v-model="form.msgPriority"-->
          <!--                placeholder="请选择"-->
          <!--                clearable-->
          <!--              >-->
          <!--                <el-option-->
          <!--                  v-for="(item, index) in messageProprityArr"-->
          <!--                  :key="index"-->
          <!--                  :label="item.dictLabel"-->
          <!--                  :value="item.dictValue"-->
          <!--                ></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="告警周期" prop="alarmPeriod">-->
          <!--              <template>-->
          <!--                <el-radio v-model="form.alarmPeriod" label="" :change="change"-->
          <!--                  >无</el-radio-->
          <!--                >-->
          <!--                <el-radio v-model="form.alarmPeriod" label="HOUR"-->
          <!--                  >小时</el-radio-->
          <!--                >-->
          <!--                <el-radio v-model="form.alarmPeriod" label="DAY">天</el-radio>-->
          <!--              </template>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item-->
          <!--              label="告警频率"-->
          <!--              prop="alarmFrequency"-->
          <!--              v-if="form.alarmPeriod !== ''"-->
          <!--            >-->
          <!--              <common-input-number-->
          <!--                :max-length="9"-->
          <!--                v-model="form.alarmFrequency"-->
          <!--                placeholder="请输入"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="24">
            <el-form-item label="巡检机器" prop="inspectionIps">
              <el-select
                  :multiple="true"
                  v-model="form.inspectionIps"
                  placeholder="请选择"
                  filterable
                  clearable
              >
                <el-option
                    v-for="(item, index) in patrolMachineArr"
                    :key="index"
                    :label="item.dictLabel"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-for="(item, i) in form.inspectionConfigList">
            <el-col :span="12">
              <el-form-item
                  :label="'巡检项' + (i + 1)"
                  :prop="'inspectionConfigList.' + i + '.name'"
                  :rules="rules.item"
              >
                <el-select
                    filterable
                    clearable
                    style="width: 100%"
                    placeholder="请选择"
                    v-model="item.name"
                    @change="change(item)"
                >
                  <el-option
                      v-for="item in inspectionType"
                      :label="item.label"
                      :value="item.key"
                      :disabled="item.isDisabled"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  label=""
                  label-width="0"
                  :prop="'inspectionConfigList.' + i + '.leftThreshold'"
                  :rules="rules.leftThreshold"
              >
                <div style="display: flex">
                  <div style="width: calc(100% - 128px); display: flex">
                    <common-input-number
                        :max-length="3"
                        style="width: 30%"
                        v-model="item.leftThreshold"
                    >
                    </common-input-number>
                    <div style="width: 6%; text-align: center">~</div>
                    <common-input-number
                        :max-length="3"
                        style="width: 30%"
                        v-model="item.middleThreshold"
                    >
                    </common-input-number>
                    <div style="width: 6%; text-align: center">~</div>
                    <common-input-number
                        :max-length="3"
                        style="width: 30%"
                        v-model="item.rightThreshold"
                    >
                    </common-input-number>
                  </div>
                  <el-button
                      v-if="butOpen"
                      style="margin-left: 8px"
                      @click="delItems(i)"
                      type="danger"
                      plain
                  >删除
                  </el-button>
                  <el-button
                      type="primary"
                      style="margin-left: 8px"
                      @click="addItems"
                      plain
                      v-if="i === 0"
                      :disabled="
                      columnList.length === form.inspectionConfigList.length
                    "
                  >新增
                  </el-button>
                </div>
              </el-form-item>
            </el-col>
            <div class="configColors" v-if="i===0">
              <div class="configColor" style="background: #808080">
                低({{ item.leftThreshold }}&lt;= x &lt;{{ item.middleThreshold }})
              </div>
              <div class="configColor" style="background: #ffff00">
                中({{ item.middleThreshold }}&lt;= x &lt;{{ item.rightThreshold }})
              </div>
              <div class="configColor" style="background: #ff0000">
                高(x &gt;={{ item.rightThreshold }})
              </div>
            </div>
          </template>

          <!--          <el-col-->
          <!--            :span="12"-->
          <!--            style="display: flex; align-items: center"-->
          <!--            v-for="(item, index) in form.inspectionConfigList"-->
          <!--          >-->
          <!--            <el-form-item-->
          <!--              :label="item.remark + ''"-->
          <!--              :prop="'inspectionConfigList.' + index + '.leftThreshold'"-->
          <!--              label-width="130px"-->
          <!--              class="displayBox"-->
          <!--              :rules="rules.leftThreshold"-->
          <!--            >-->
          <!--              <common-input-number-->
          <!--                v-model="item.leftThreshold"-->
          <!--                :min="0"-->
          <!--              ></common-input-number>-->
          <!--              <span style="margin: 0 8px">~</span>-->

          <!--              <common-input-number-->
          <!--                v-model="item.rightThreshold"-->
          <!--                :min="0"-->
          <!--              ></common-input-number>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
      </el-form>
    </common-edit-dialog>
    <!--    <common-edit-dialog-->
    <!--      title="新增巡查项"-->
    <!--      :visible.sync="dialogShow2"-->
    <!--      @cancel="close2"-->
    <!--      @submit="thresholdChange"-->
    <!--    >-->
    <!--      <div class="transfer-box">-->
    <!--        <el-transfer-->
    <!--          v-model="thresholdValue"-->
    <!--          :data="columnList"-->
    <!--          :titles="['源列表', '目标列表']"-->
    <!--          :button-texts="['加入左侧', '加入右侧']"-->
    <!--        ></el-transfer>-->
    <!--      </div>-->
    <!--    </common-edit-dialog>-->
  </span>
</template>

<script>
import {
  threshold_list,
  add_inspection,
  edit_inspection,
  info_inspection
} from '@/api/management/system/system.js'

import Cron from '@/components/Cron'

export default {
  components: {
    Cron
  },
  props: {
    alarmLevelArr: {
      type: Array,
      default() {
        return []
      }
    },
    messageProprityArr: {
      type: Array,
      default() {
        return []
      }
    },
    patrolMachineArr: {
      type: Array,
      default() {
        return []
      }
    },
    userList: {
      type: Array,
      default: () => []
    },
    columnList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const checkMinInput = (rule, value, callback) => {
      let i = parseInt(rule.field.split('.')[1])
      if (
          value === '' ||
          value === undefined ||
          this.form.inspectionConfigList[i].rightThreshold === '' ||
          this.form.inspectionConfigList[i].rightThreshold === undefined ||
          this.form.inspectionConfigList[i].middleThreshold === '' ||
          this.form.inspectionConfigList[i].middleThreshold === undefined
      ) {
        callback(new Error('请填写值'))
      } else if (
          value > 100 ||
          this.form.inspectionConfigList[i].rightThreshold > 100 ||
          this.form.inspectionConfigList[i].middleThreshold > 100
      ) {
        callback(new Error('取值范围0~100'))
      } else if (
          value >= this.form.inspectionConfigList[i].rightThreshold ||
          value >= this.form.inspectionConfigList[i].middleThreshold ||
          this.form.inspectionConfigList[i].middleThreshold >
          this.form.inspectionConfigList[i].rightThreshold
      ) {
        callback(new Error('范围应从小到大'))
      } else {
        callback()
      }
    }
    return {
      cronPopover: false,
      butOpen: false,
      itemArr: [1],
      optionItem: [],
      isPersistenceLoading: false,
      noticeTypeList: [], //通知方式选中
      noticeUsers: [], //通知人选中
      showNotice: false, //是否显示同时
      thresholdList: [], //阀值列表
      businessPlateList: [], //工单流程列表
      businessPlateCheckedId: '', //工单流程列表
      dialogTitle: '新增巡检项', // 标题
      dialogShow: false, // 是否显示
      dialogShow2: false, // 是否显示
      thresholdValue: [], //阀值选择，选中['123','456']
      inspectionConfigList: [], //阀值展示列表
      form: {
        alarmFrequency: 1,
        alarmPeriod: '',
        inspectionTime: '0 0/30 * * * ?',
        inspectionConfigList: [
          {
            leftThreshold: 0,
            logic: 'GT',
            name: '',
            remark: '',
            rightThreshold: 85,
            middleThreshold: 60
          }
        ]
      },
      rules: {
        alarmFrequency: [
          { required: true, message: '请输入告警频次', trigger: 'blur' },
          {
            type: 'number',
            min: 1,
            max: 999999999,
            message: '告警频次范围1-999999999',
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '请输入巡检名称', trigger: 'blur' },
          { max: 50, message: '巡检名称不能超过50个字符', trigger: 'blur' }
        ],
        inspectionTime: [
          { required: true, message: '请输入巡检周期', trigger: 'blur' },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value.length) value = value.trim()
              let arr = value.split(' ')
              if (arr.length === 6 || arr.length === 7) {
                let [
                  seconds,
                  minutes,
                  hours,
                  dayOfMonth,
                  month,
                  dayOfWeek,
                  year
                ] = arr

                let notIn = arr.filter(
                    (item, index) =>
                        item !== '*' &&
                        item !== '?' &&
                        item !== undefined &&
                        item !== '' &&
                        index > 1
                )

                if (notIn.length > 0) {
                  callback()
                } else {
                  if (seconds === '*') {
                    callback(new Error('间隔时间必须大于15分钟'))
                  } else {
                    if (minutes === '*') {
                      callback(new Error('间隔时间必须大于15分钟'))
                    } else {
                      let minuteArr = minutes.split(',')

                      let illegal = minuteArr.filter((m) => {
                        if (m.includes('-')) {
                          return true
                        } else if (m.includes('/')) {
                          let [start, cycle] = m.split('/')
                          return cycle < 15
                        } else {
                          return m < 15
                        }
                      })

                      if (illegal.length) {
                        callback(new Error('间隔时间必须大于15分钟'))
                      } else {
                        callback()
                      }
                    }
                  }
                }
              } else {
                callback(new Error('请输入正确的corn表达式'))
              }
            },
            trigger: 'blur'
          }
        ],
        alarmLevel: [
          { required: true, message: '请选择告警等级', trigger: 'blur' }
        ],
        msgPriority: [
          { required: true, message: '请选择消息优先级', trigger: 'blur' }
        ],
        inspectionIps: [
          { required: true, message: '请选择巡检机器', trigger: 'blur' }
        ],
        leftThreshold: [
          { required: true, validator: checkMinInput, trigger: 'blur' }
        ],
        item: [{ required: true, message: '请选择巡检项', trigger: 'blur' }]
      },
      menuTree: [
        {
          id: 1,
          label: '保旺达软件技术有限公司',
          children: [
            {
              id: 2,
              label: '开发部'
              // children: [{
              //   id: 9,
              //   label: '三级 1-1-1'
              // }, {
              //   id: 10,
              //   label: '三级 1-1-2'
              // }]
            },
            {
              id: 3,
              label: '测试部'
            },
            {
              id: 4,
              label: '项目管理办'
            }
          ]
        }
      ], // 菜单树
      treeProp: {
        // 树参数
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {},
  computed: {
    inspectionType: function() {
      // console.log('===>', this.form.inspectionConfigList)
      // 1
      let names = this.form.inspectionConfigList.reduce((r, c) => {
        if (c.name) r.push(c.name)
        return r
      }, [])
      // console.log('names', names)
      // 2
      let list = this.columnList.reduce((r, c) => {
        r.push({
          ...c,
          isDisabled: names.includes(c.key)
        })
        return r
      }, [])
      // console.log('list', list)
      return list

      //   this.columnList.forEach((item) => {
      //     item.isDisabled = false
      //     this.form.inspectionConfigList.forEach(insitem => {
      //       if (item.key == insitem.name) {
      //         item.isDisabled = true
      //       }
      //     })
      //   })
      //   return this.columnList//
    }
  },
  methods: {
    change(item) {
      // console.log(this.columnList);
      for (let i = 0; i < this.columnList.length; i++) {
        if (item.name == this.columnList[i].key) {
          item.remark = this.columnList[i].label
        }
      }
      // console.log(this.form.inspectionConfigList);
    },
    /**
     * 获取阀值列表
     */
    addItems() {
      this.butOpen = true
      if (this.form.inspectionConfigList.length < this.columnList.length) {
        this.form.inspectionConfigList.push({
          leftThreshold: 0,
          logic: 'GT',
          name: '',
          remark: '',
          rightThreshold: 85,
          middleThreshold: 60
        })
      }
    },
    delItems(i) {
      this.form.inspectionConfigList.splice(i, 1)
      if (
          this.form.inspectionConfigList &&
          this.form.inspectionConfigList.length === 1
      ) {
        this.butOpen = false
      }
    },

    /**
     * 获取工单流程列表
     */
    // getBusinessPlateList() {
    //   businessplate_list({ businessPlate: "0" }).then((res) => {
    //     this.businessPlateList = res.result;
    //   });
    // },
    /**
     * 获取巡检详情
     */
    getInfo(id) {
      info_inspection({ id: id }).then((res) => {
        const inspectionIps = res.data.inspectionIps
        this.$set(
            this.form,
            'inspectionIps',
            inspectionIps ? inspectionIps.split('#') : []
        )
        this.inspectionConfigList = []
        let configList = res.data.inspectionConfigList
        if (!!configList) {
          for (var i in configList) {
            let item = configList[i]

            this.inspectionConfigList.push({
              name: item.name,
              logic: item.logic,
              leftThreshold: item.leftThreshold,
              rightThreshold: item.rightThreshold,
              middleThreshold: item.middleThreshold,
              // threshold: item.threshold.toString(),
              remark: item.remark
            })
          }
        }
        if (!!this.inspectionConfigList) {
          for (var i in this.inspectionConfigList) {
            let item = this.inspectionConfigList[i]
            this.thresholdValue.push(item.name)
          }
        }

        let noticeContent = eval(res.data.noticeContent)
        this.noticeTypeList = []
        let accountList = []
        for (var i in noticeContent) {
          let item = noticeContent[i]
          if (item.noticeType == 'workOrder' && item.checked == 0) {
            this.showNotice = true

            let arr = item.account.split(',')

            this.businessPlateCheckedId = arr.length === 3 ? arr[2] : null
          } else if (item.noticeType == 'message' && item.checked == 0) {
            this.noticeTypeList.push('message')
            accountList = accountList.concat(item.account.split(','))
          } else if (item.noticeType == 'email' && item.checked == 0) {
            this.noticeTypeList.push('email')
            accountList = accountList.concat(item.account.split(','))
          } else if (item.noticeType == 'sms' && item.checked == 0) {
            this.noticeTypeList.push('sms')
            accountList = accountList.concat(item.account.split(','))
          }
        }

        // this.noticeUsers = [];
        // for(var i in this.userList){
        // 	let item = this.userList[i];
        // 	if(accountList && accountList.length && accountList.indexOf(item.email) > -1
        // 		|| accountList && accountList.length && accountList.indexOf(item.phonenumber) > -1
        // 		|| accountList && accountList.length && accountList.indexOf(item.userName) > -1){
        // 		this.noticeUsers.push(item.userId);
        // 	}
        // }

        // 接口编辑之后
        this.noticeUsers = []
        const noticeUsers = res.data.userIds ? res.data.userIds.split(',') : []
        this.userList.forEach((v) => {
          noticeUsers.forEach((value) => {
            if (value == v.userId) {
              this.noticeUsers.push(v.userId)
            }
          })
        })
        // this.noticeUsers = res.data.userIds ? res.data.userIds.split(",") : [];

        this.form.inspectionConfigList = this.inspectionConfigList
      })
    },

    thresholdChange() {
      this.dialogShow2 = false
      for (var i in this.columnList) {
        let item = this.columnList[i]
        if (this.thresholdValue.indexOf(item.key) >= 0) {
          let config = this.inspectionConfigList.find((config) => {
            return config.name == item.key
          })
          if (!config) {
            this.inspectionConfigList.push({
              name: item.key,
              logic: 'GT',
              remark: item.label
            })
          }
        }
      }
      let inspectionConfigCache = []
      for (var i in this.inspectionConfigList) {
        let item = this.inspectionConfigList[i]
        if (this.thresholdValue.indexOf(item.name) >= 0) {
          inspectionConfigCache.push(item)
        }
      }
      this.inspectionConfigList = inspectionConfigCache
      this.form.inspectionConfigList = inspectionConfigCache
    },

    showAddThreshold() {
      this.dialogShow2 = true
    },
    handleNodeClick(data) {
    },
    /**
     * 关闭
     */
    close(onlyClose) {
      this.cronPopover = false
      this.dialogShow = false
      this.$refs.form.resetFields()
      this.businessPlateList = []
      this.form = {}
      this.resetData()
      if (!onlyClose) {
        this.$emit('refresh')
      }

    },
    /**
     * 关闭
     */
    close2() {
      this.dialogShow2 = false
    },

    resetData() {
      this.showNotice = false
      this.businessPlateCheckedId = ''
      this.noticeTypeList = []
      this.noticeUsers = []
      this.thresholdValue = []
      this.thresholdList = []

      this.inspectionConfigList = []
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogTitle = data.id ? '编辑巡检' : '新增巡检'
      this.dialogShow = true
      this.form = data.id ? data : this.$options.data().form

      if (!!data.id) {
        this.getInfo(data.id)
      } else {
        this.resetData()
      }
    },

    onChangeCron(v) {
      this.cronPopover = false
      // this.form.inspectionTime = v.substr(0, v.length - 2);
      this.form.inspectionTime = v
    },

    showCronPopover(val) {
      this.cronPopover = true
    },

    /**
     * 提交
     */
    submitForm() {
      // if (this.showNotice && !this.businessPlateCheckedId) {
      //   this.$GlobalErrorConfirm("通知流程不能为空");
      //   return;
      // }
      //
      // if (!!this.noticeTypeList && this.noticeTypeList.length > 0) {
      //   if (!this.noticeUsers || this.noticeUsers.length == 0) {
      //     this.$GlobalErrorConfirm("选择通知方式后，必须选择通知人");
      //     return;
      //   }
      // }
      //
      // if (!!this.noticeUsers && this.noticeUsers.length > 0) {
      //   if (!this.noticeTypeList || this.noticeTypeList.length == 0) {
      //     this.$GlobalErrorConfirm("选择通知人后，必须选择通知方式");
      //     return;
      //   }
      // }
      //
      // if (
      //   !this.inspectionConfigList ||
      //   this.inspectionConfigList.length === 0
      // ) {
      //   this.$GlobalErrorConfirm("请添加阈值信息");
      //   return;
      // }
      // let canGo = true;
      // for (var i in this.inspectionConfigList) {
      //   let item = this.inspectionConfigList[i];
      //   if (!item.threshold || item.threshold < 0) {
      //     canGo = false;
      //   }
      // }
      // if (!canGo) {
      //   this.$GlobalErrorConfirm("阈值不能为空");
      //   return;
      // }

      // logic

      let businessPlateCheckedName
      for (var i in this.businessPlateList) {
        let item = this.businessPlateList[i]
        if (this.businessPlateCheckedId == item.deploymentId) {
          businessPlateCheckedName = item.name
        }
      }
      let accountMessage = []
      let accountEmail = []
      let accountPhone = []
      for (let i in this.userList) {
        let item = this.userList[i]
        if (this.noticeUsers.indexOf(item.userId) > -1) {
          if (!!item.userName) {
            accountMessage.push(item.userId)
          }
          if (!!item.email) {
            accountEmail.push(item.userId)
          }
          if (!!item.phonenumber) {
            accountPhone.push(item.userId)
          }
        }
      }

      let noticeContent = [] //checked=0 选中
      //通知流程
      if (this.businessPlateCheckedId) {
        let workflow = this.businessPlateList.find(
            (item) => item.key === this.businessPlateCheckedId
        )

        noticeContent.push({
          noticeType: 'workOrder',
          checked: 0,
          account:
              workflow.deploymentId +
              ',' +
              workflow.name +
              ',' +
              this.businessPlateCheckedId
        })
      } else {
        noticeContent.push({
          noticeType: 'workOrder',
          checked: 1,
          account: ''
        })
      }
      //系统消息通知方式
      if (this.noticeTypeList.indexOf('message') > -1) {
        noticeContent.push({
          noticeType: 'message',
          checked: 0,
          account: accountMessage.join(',')
        })
      } else {
        noticeContent.push({
          noticeType: 'message',
          checked: 1,
          account: ''
        })
      }
      //email通知放心
      if (this.noticeTypeList.indexOf('email') > -1) {
        noticeContent.push({
          noticeType: 'email',
          checked: 0,
          account: accountEmail.join(',')
        })
      } else {
        noticeContent.push({ noticeType: 'email', checked: 1, account: '' })
      }
      //短信通知方式
      if (this.noticeTypeList.indexOf('sms') > -1) {
        noticeContent.push({
          noticeType: 'sms',
          checked: 0,
          account: accountPhone.join(',')
        })
      } else {
        noticeContent.push({ noticeType: 'sms', checked: 1, account: '' })
      }
      // console.log(noticeContent)
      this.form.noticeContent = JSON.stringify(noticeContent)
      // this.form.inspectionConfigList = this.inspectionConfigList;

      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (!!this.form.id) {
            const params = Object.assign({}, this.form, {
              userIds: this.noticeUsers.join(','),
              inspectionIps: this.form.inspectionIps
                  ? this.form.inspectionIps.join('#')
                  : ''
            })
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true
              edit_inspection(params)
                  .then((res) => {
                    if (res && res.code === 200) {
                      this.$GlobalSuccessMessage('编辑成功')
                      this.close()
                    } else {
                      this.$GlobalErrorConfirm('编辑失败', res.msg)
                    }
                  })
                  .finally(() => {
                    this.isPersistenceLoading = false
                  })
            }
          } else {
            const params = Object.assign({}, this.form, {
              userIds: this.noticeUsers.join(','),
              inspectionIps: this.form.inspectionIps
                  ? this.form.inspectionIps.join('#')
                  : ''
            })
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true
              add_inspection(params)
                  .then((res) => {
                    if (res && res.code === 200) {
                      this.$GlobalSuccessMessage('新增成功')
                      this.close()
                    } else {
                      this.$GlobalErrorConfirm('新增失败', res.msg)
                    }
                  })
                  .finally(() => {
                    this.isPersistenceLoading = false
                  })
            }
          }
        }
      })
    },
    inputBlur(item) {
      if (parseInt(item.threshold) > 100) item.threshold = '100'
    },
    input(item) {
      item.threshold = item.threshold.replace(/[^\d]/g, '')
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  margin-left: 0;
  margin-bottom: 8px;
}

.title-block {
  clear: both;
  border-left: 3px solid #1890ff;
  padding-left: 6px;
  height: 14px;
  line-height: 14px;
  margin-left: 12px;
}

.noticediv {
  width: 160px !important;
  margin-left: 10px;
}

.editselect {
  width: 220px !important;
}

.thresholdselect {
  width: 90px !important;
  float: left;
}

.thresholdinput {
  width: 104px !important;
  float: left;
}

.addThreshold {
  float: right;
  margin-right: 12px;
}

.displayBox {
  ::v-deep {
    .el-form-item__content {
      display: flex;

      .thresholdselect {
        flex: 1;
      }

      .thresholdinput {
        flex: 1;
      }
    }
  }
}

.transfer-box {
  text-align: center;

  ::v-deep {
    .el-transfer {
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-transfer-panel {
        height: 100%;
        width: 260px;

        .el-transfer-panel__header {
          .el-checkbox {
            text-align: left;
          }
        }

        .el-transfer-panel__body {
          height: 100%;

          .el-checkbox-group {
            height: 100%;

            .el-checkbox {
              text-align: left;
            }
          }
        }
      }

      .el-transfer__buttons {
        width: 180px;

        .el-button {
          margin-left: 0;
          color: #409eff;
          background: #ecf5ff;
          border-color: #b3d8ff;

          span {
            margin-left: 0;
          }

          &:focus,
          &:hover {
            background: #409eff;
            border-color: #409eff;
            color: #fff;
          }
        }

        .is-disabled,
        .is-disabled:hover,
        .is-disabled:focus {
          color: #8cc5ff;
          background-color: #ecf5ff;
          border-color: #d9ecff;
        }
      }
    }
  }
}

::v-deep .el-select {
  .el-tag {
    .el-tag__close {
      color: #fff;
      margin-right: 3px;
    }
  }
}

.displayBox {
  width: 100%;

  ::v-deep .el-form-item__content {
    width: calc(100% - 130px);

    .common-input-number {
      width: calc((100% - 25px) / 2);
    }
  }

  ::v-deep .el-input-group__prepend {
    padding: 0;

    .el-select {
      width: 80px;
      margin: -10px 0;
    }
  }
}

.right-form-item {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}

::v-deep .common-input-number {
  width: 100px;
}

.notice-users {
  ::v-deep .el-scrollbar__wrap {
    height: 220px;
  }
}

.configColors {
  justify-content: space-between;
  width: 100%;
  padding: 0 137px 18px 99px;
  display: flex;

  .configColor {
    width: 30%;
    text-align: center;
    background: #808080;
    color: #000;
    height: 20px;
    border: 0;
    font: 14px/20px "";
  }
}

#changeContab ::v-deep #tab-5 {
  display: none;
}
</style>
<style lang="scss">
.vue-cron #pane-3 .el-select {
  width: 46% !important;
}

.vue-cron .el-tabs__content {
  overflow-y: scroll;
  max-height: 310px;
}
</style>
